<template>
  <div class="edetails">
    <img src="../../assets/images/centerbag.png" alt="" width="100%" class="centerbagimg">
    <img src="../../assets/images/x.png" alt="" width="58Px" height="36Px" class="x" @click="gbcenter()">
    <template v-if="shownum==2||shownum==3">
      <div class="tabs page">
        <div class="cetitle">
          <span class="cesj" v-if="shownum==2">机构数据分析</span>
          <span class="cesj" v-else>学校数据分析</span>
          <span class="cedc" @click="down()">导出所有数据</span>
        </div>
        <div class="tabox">
          <div class="tab1">
            <div @click="funtablistbgshow(index)" v-for="(item,index) in list1" :key="index" :class="tablistbgshow==index?'tablistbgshow tablistbg' :'tablistbg'">{{item.name}}</div>
            <el-pagination
              v-if="page_count>9"
              @current-change="handleCurrentChange"
              background
              small
              layout="prev, pager, next"
              :page-size="9"
              :pager-count="5"
              :total="page_count">
            </el-pagination>
          </div>
          <div class="tab2">
            <div class="tab2l" style="width: 225px;">
              <div style="padding: 28px 30px 20px;">
                <div></div>
                <span v-if="shownum==3">机构入驻情况 （{{page_count2}}所）</span>
                <span v-else>学校入驻情况 （{{page_count2}}所）</span>
                <div v-for="(item,index) in list2" :class="index==tab2lactive?'active sclist': 'sclist'" @click="tab2lactivefun(index)">{{item.name}}</div>
              </div>
              <el-pagination
                v-if="page_count2>7"
                @current-change="handleCurrentChange2"
                background
                small
                layout="prev, pager, next"
                :page-size="7"
                :pager-count="5"
                :total="page_count2">
              </el-pagination>
            </div>
            <div class="tab2r" style="width: calc(100% - 230px);">
              <div style="padding: 28px 30px 20px;">
                <div>课程数量 （{{page_count3}}）</div>
                <div v-for="(item,index) in list3" :class="index==tab2lactive?'active sclist': 'sclist'">{{item.title}}</div>
              </div>
              <el-pagination
                v-if="page_count3>7"
                @current-change="handleCurrentChange3"
                background
                small
                layout="prev, pager, next"
                :page-size="7"
                :pager-count="5"
                :total="page_count3">
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </template>
    <template v-else>
      <div class="tabs" style="padding: 65px 110px 45px;">
        <div class="cttitle">课后服务数据占比图</div>
        <div style="height: calc(100% - 25px);" class="cebbbox">
          <div class="cbselbox">
            <div class="seltime">
              <el-date-picker
                :editable="false"
                value-format="yyyy-MM"
                v-model="time"
                align="right"
                type="month"
                @change="timefun"
                placeholder="选择日期">
              </el-date-picker>
            </div>
            <div class="allstu0">
              <el-select v-model="actviebtmlist" placeholder="请选择" @change="xueduan()">
                <el-option
                  v-for="(item,index) in btmlist"
                  :key="index"
                  :label="item"
                  :value="index">
                </el-option>
              </el-select>
            </div>
            <div class="allstu">
              <el-select v-model="value" placeholder="请选择" @change="registration()">
                <el-option
                  v-for="item in options"
                  :key="item.school_id"
                  :label="item.name"
                  :value="item.school_id">
                </el-option>
              </el-select>
            </div>
          </div>
          <hcharts :id="id" :option="option" v-if="paramsab!=''" :key="keytimg"></hcharts>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
  var paramsab = ''
  import { school,proportion,jgapi,jgxxapi,jgkcapi,jgxx3api,jgjg3api,jgkc3api,xxdc} from '@/api/user.js'
  import hcharts from '../index-echarts/hcharts.vue'
  import axios from 'axios'
  export default {
    name: 'edetails',
    components: {
      hcharts
    },
    props:["shownum","qyvalue"],
    data() {
      return{
        keytimg: '',
        paramsab: '',
        
        tablistbgshow: 0,
        
        page_count: 0,
        page: 1,
        tab2lactive: 0,
        list1: [],
        
        page_count2: 0,
        page2: 1,
        tab2lactive2: 0,
        list2: [],
        
        page_count3: 0,
        page3: 1,
        list3: [],
        
        time: '',
         
        btmlist: ['全学段','小学','初中'],
        actviebtmlist: 0,
         
        options: [],
        value: '',
         
        id: 'test',
        option: {
          chart: {
            type: "pie", //饼图
            options3d: {
              enabled: true, //使用3d功能
              alpha: 60, //延y轴向内的倾斜角度
              beta: 0,
            },
            backgroundColor: 'rgba(0, 0, 0, 0)', // 不显示背景色
            width: 0,
            height: 0 // 设置大小是为了饼图能在想要的区域中显示
          },
          title: {
            text: "", //图表的标题文字
          },
          subtitle: {
            text: "", //副标题文字
          },
          plotOptions: {
            pie: {
              allowPointSelect: false, //每个扇块能否选中
              cursor: "pointer", //鼠标指针
              innerSize: 0, // 圆环宽度
              depth: 35, //饼图的厚度
              dataLabels: {
                enabled: true, // 是否显示饼图的线形tip
                distance: 30, // 设置引导线的长度
                color: 'white',// 全局设置字体颜色
                style: {
                  textOutline: 'none', // 去掉文字白边 
                  fontSize: '12'
                },
                // 引导线
                connectorShape: function (labelPosition,connectorPosition,options) {
                  var touchingSliceAt = connectorPosition.touchingSliceAt,
                    alignment = labelPosition.alignment,
                    left = 0,
                    right = 0;
                  if (alignment == "left") {
                    left = labelPosition.x + this.dataLabel.bBox.width + 14;
                    right = labelPosition.x + 2;
                  } else {
                    left = labelPosition.x - this.dataLabel.bBox.width - 14;
                    right = labelPosition.x - 2;
                  }
                  return [
                    "M",
                    left,
                    labelPosition.y,
                    "L",
                    right,
                    labelPosition.y,
                    "L",
                    touchingSliceAt.x,
                    touchingSliceAt.y,
                  ];
                },
                formatter: function(params) {
                  var proportion = ''
                  if (this.y == paramsab.data.a.number) {
                    proportion = paramsab.data.a.proportion
                  } else {
                    proportion = paramsab.data.b.proportion
                  }
                  return '<div style="font-weight:bold;font-size: 16px;color: '+this.color+';">' + proportion +'</div><br/><div style="font-weight:bold;color: '+this.color+';font-size: 14px;">共' + this.y +'人次</div>'
                }
              },
              showInLegend: true
            }
          },
          legend: {
            useHTML: true,
            symbolWidth: 0.001,
            symbolHeight: 0.001,
            symbolRadius: 0.001,
            labelFormatter() {
              let span = '<span style="background-color: '+this.options.color+';width: 10px;height: 10px;border-radius: 3px;display: inline-block;margin-right: 10px"></span>'+'<span style="color: white;font-size: 13px;">'+this.name+'</span>'
              return span
            }
          },
          tooltip: {
            backgroundColor: 'white', // 背景颜色
            borderColor: 'white', // 边框颜色
            borderRadius: 0, // 边框圆角
            borderWidth: 1, // 边框宽度
            shadow: true, // 是否显示阴影
            animation: true, // 是否启用动画效果
            style: { // 文字内容相关样式
              color: "#333",
              // fontFamily: "Courir new",
              fontSize: '16'
            }
          },
          credits: {
            enabled: false //禁用版权url
          },
          series: [
            {
              type: "pie",
              name: "", //统一的前置词,非必须
              itemStyle: {
                borderColor: 'transparent',
                borderWidth: 20
              },
              data: [
                { name: '课后服务 A', y: '', proportion: '', color: '#0083ff', sliced: true, selected: true},
                { name: '课后服务 B', y: '', proportion:'', color: '#ffe029', sliced: true, selected: true},
              ]
            },
          ]
        }
      }
    },
    computed: {},
    watch: {
      qyvalue:{
        deep:true,
        immediate: true,
        handler(newVal,oldVal){
          if (newVal!='') {
            this.tablistbgshow = 0
            this.tab2lactive = 0
            this.tab2lactive2 = 0
            this.page = 1
            this.page2 = 1
            this.page3 = 1
            if(this.shownum==1) {
              this.schoolfun()
            } else if(this.shownum==2){
              this.institutionfun()
            } else {
              this.funjgxx3api()
            }
          }
        }
      },
      shownum: {
        deep:true,
        immediate: true,
        handler(newVal,oldVal){
          if (newVal!='') {
            this.tablistbgshow = 0
            this.tab2lactive = 0
            this.tab2lactive2 = 0
            this.page = 1
            this.page2 = 1
            this.page3 = 1
            if(this.shownum==1) {
              this.schoolfun()
            } else if(this.shownum==2){
              this.institutionfun()
            } else {
              this.funjgxx3api()
            }
          }
        }
      }
    },
    created() {
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var now = year+'-'+month
      // this.time = now
      this.time = '2023-9'
    },
    mounted() {},
    methods: {
      gbcenter() {
        this.$emit('gbcenter')
        this.paramsab = ''
      },
      // 导出
      down() {
        if (this.shownum==2) {
          // this.adow('http://hancheng.hbqianze.com/api/v4/6470478cd524d?area_id='+this.qyvalue,'机构数据')
          this.adow('https://admin.hcjypt.com/api/v4/6470478cd524d?area_id='+this.qyvalue,'机构数据')
        } else if (this.shownum==3) {
          // this.adow('http://hancheng.hbqianze.com/api/v4/64701dfda2158?area_id='+this.qyvalue,'学校数据')
          this.adow('https://admin.hcjypt.com/api/v4/64701dfda2158?area_id='+this.qyvalue,'学校数据')
        }
      },
      adow(url,title) {
        var that = this
        var params = {
          area_id: this.qyvalue,
        }
        axios.get(url,{responseType: "blob"}).then((res) => {
          let blob = res.data;
          let a = document.createElement("a");
          a.download = title;
          a.href = URL.createObjectURL(blob);
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
        });
      },
      // 分页
      handleCurrentChange(val) {
        this.tablistbgshow = 0
        this.tab2lactive = 0
        this.tab2lactive2 = 0
        this.page = val
        this.page2 = 1
        this.page3 = 1
        if (this.shownum==2) {
          this.institutionfun()
        } else if (this.shownum==3) {
          this.funjgxx3api()
        }
      },
      handleCurrentChange2(val) {
        this.tab2lactive = 0
        this.tab2lactive2 = 0
        this.page2 = val
        this.page3 = 1
        if (this.shownum==2) {
          this.funjgxxapi()
        } else if (this.shownum==3) {
          this.funjgjg3api()
        }
      },
      handleCurrentChange3(val) {
        this.tab2lactive2 = 0
        this.page3 = val
        if (this.shownum==2) {
          this.jgkcapifun()
        } else if (this.shownum==3) {
          this.funjgkc3api()
        }
      },
      // 切换机构
      funtablistbgshow(e) {
        this.tablistbgshow = e
        this.tab2lactive = 0
        this.page2 = 1
        this.page3 = 1
        if (this.shownum == 2) {
          this.funjgxxapi()
        }if (this.shownum == 3) {
          this.funjgjg3api()
        }
      },
      // 学校切换
      tab2lactivefun(e) {
        this.tab2lactive = e
        this.page3 = 1
        if (this.shownum == 2) {
          this.jgkcapifun()
        }if (this.shownum == 3) {
          this.funjgkc3api()
        }
      },
// ********************************************************************  学校3  **********************************************************************
    
    // 学校
     funjgxx3api() {
       var that = this
       var params = {
         area_id: this.qyvalue,
         page: this.page,
         limit: 9,
       }
       jgxx3api(params).then(res => {
         this.page_count = res.data.total
         this.list1 = res.data.data
         if (res.data.data.length == 0) {
           this.list2 = []
           this.list3 = []
           this.page_count2 = 0
           this.page_count3 = 0
           return
         }
         this.funjgjg3api()
       })
     },
     // 机构
     funjgjg3api() {
       var that = this
       var params = {
         school_id: this.list1[this.tablistbgshow].id,
         page: this.page2,
         limit: 7,
       }
       jgjg3api(params).then(res => {
         this.list2 = res.data.data
         this.page_count2 = res.data.total
         if (res.data.data.length == 0) {
           this.list3 = []
           this.page_count3 = 0
           return
         }
         this.funjgkc3api()
       })
     },
     // 课程
     funjgkc3api() {
       var that = this
       var params = {
         mechanism_id: this.list2[this.tab2lactive].id,
         school_id: this.list1[this.tablistbgshow].id,
         page: this.page3,
         limit: 7,
       }
       jgkc3api(params).then(res => {
         this.list3 = res.data.data
         this.page_count3 = res.data.total
       })
     },

// ********************************************************************  机构2  **********************************************************************
     // 机构
      institutionfun() {
        var that = this
        var params = {
          area_id: this.qyvalue,
          page: this.page,
          limit: 9,
        }
        jgapi(params).then(res => {
          this.page_count = res.data.total
          this.list1 = res.data.data
          if (res.data.data.length == 0) {
            this.list2 = []
            this.list3 = []
            this.page_count2 = 0
            this.page_count3 = 0
            return
          }
          this.funjgxxapi()
        })
      },
      // 学校
      funjgxxapi() {
        var that = this
        var params = {
          mechanism_id: this.list1[this.tablistbgshow].id,
          page: this.page2,
          limit: 7,
        }
        jgxxapi(params).then(res => {
          this.list2 = res.data.data
          this.page_count2 = res.data.total
          if (res.data.data.length == 0) {
            this.list3 = []
            this.page_count3 = 0
            return
          }
          this.jgkcapifun()
        })
      },
      // 课程
      jgkcapifun() {
        var that = this
        var params = {
          mechanism_id: this.list1[this.tablistbgshow].id,
          school_id: this.list2[this.tab2lactive].id,
          page: this.page3,
          limit: 7,
        }
        jgkcapi(params).then(res => {
          this.list3 = res.data.data
          this.page_count3 = res.data.total
        })
      },

// ********************************************************************  扇形图1  **********************************************************************
      
      // 切换时间
      timefun() {
        this.funproportion()
      },
      // 学段下拉
      xueduan() {
        this.schoolfun()
      },
      // 学校下拉
      registration() {
        this.funproportion()
      },
      // 学校
      schoolfun() {
        var that = this,
        params = {
          school_area_id: this.qyvalue,
          school_stage_id: 0
        }
        if (this.actviebtmlist == 1) {
          params.school_stage_id = 3
        } else if (this.actviebtmlist == 2) {
          params.school_stage_id = 4
        }
        school(params).then(res => {
          var obj = {school_id: 0,name: '全部学校'}
          res.data.unshift(obj)
          this.options = res.data
          this.value = res.data[0].school_id
          this.funproportion()
        })
      },
      // 获取饼状图比例
      funproportion() {
        var that = this
        var params = {
          academic_stage_id: this.actviebtmlist+2,
          school_id: this.value,
          area_id: this.qyvalue,
          date: ''
        }
        if(params.academic_stage_id ==2) {
          params.academic_stage_id = 0
        }
        if (this.time!='') {
          params.date = this.time
        }
        proportion(params).then(res => {
          this.paramsab = paramsab = res
          this.option.series[0].data[0].y = res.data.a.number
          this.option.series[0].data[1].y = res.data.b.number
          
          this.option.series[0].data[0].proportion = res.data.a.proportion
          this.option.series[0].data[1].proportion = res.data.b.proportion
          this.keytimg = new Date().getTime()
        })
      },
    }
  }
</script>
<style scoped lang="less">
  .edetails{
    width: 100%;
    height: 100%;
    position: relative;
    color: white;
    .centerbagimg{
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      z-index: -1;
    }
    .x{
      position: absolute;
      top: 30Px;
      right: 60Px;
      cursor: pointer;
      z-index: 0;
    }
  }
  // 内容部分
  // 2 3
  .tabs{
    width: 100%;
    height: 100%;
    padding: 65px 65px 45px;
    box-sizing: border-box;
    .cetitle{
      height: 60Px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      font-size: 22Px;
      .cedc{
        font-size: 12Px!important;
        margin-left: 10Px;
        padding: 4Px 7Px;
        background-color: #186bbe;
        border: 1px solid #0075cd;
        border-radius: 15Px;
        cursor: pointer;
      }
    }
    .tabox{
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: calc(100% - 60Px);
      .tab1{
        width: 240Px;
        height: 100%;
        ::v-deep .el-pagination{
          margin-top: 22px;
          margin-left: -16px;
        }
        .tablistbg{
          height: 35Px;
          width: 200Px;
          padding-left: 20Px;
          background-size: 100%;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          overflow:hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          -o-text-overflow:ellipsis;
          margin-bottom: 10Px;
          border-radius: 5px;
          overflow: hidden;
          cursor: pointer;
        }
        .tablistbgshow{
          background-image: url('../../assets/images/tablistbg.png');
        }
      }
      .tab2{
        width: calc(100% - 240Px);
        height: 100%;
        background:
          linear-gradient(to top, #03c0fb, #03c0fb) left top no-repeat,/*上左*/
          linear-gradient(to right, #03c0fb, #03c0fb) left top no-repeat,/*左上*/
          linear-gradient(to left, #03c0fb, #03c0fb) right top no-repeat,/*上右*/
          linear-gradient(to bottom, #03c0fb, #03c0fb) right top no-repeat,/*上右*/
          linear-gradient(to left, #03c0fb, #03c0fb) left bottom no-repeat,/*下左*/
          linear-gradient(to bottom, #03c0fb, #03c0fb) left bottom no-repeat,/*左下*/
          linear-gradient(to top, #03c0fb, #03c0fb) right bottom no-repeat,/*下右*/
          linear-gradient(to left, #03c0fb, #03c0fb) right bottom no-repeat;/*右下*/
        background-size: 5Px 35Px, 35Px 5Px, 5Px 35Px, 35Px 5Px;
        background-color: rgba(49,156,255,0.2);
        border: 1px solid #059bec;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .tab2l{
          height: 100%;
          box-sizing: border-box;
          font-weight: bold;
          background: rgba(0, 0, 0, 0.1);
          .sclist{
            margin-top: 20px;
            height: 30px;
            border-radius: 15px;
            overflow: hidden;
            font-size: 14px;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
          }
          .active{
              background: linear-gradient(to right,#ff8b00,#ffb900);
          }
        }
        .tab2r{
          height: 100%;
          background: rgba(0, 0, 0, 0.1);
          .sclist{
            margin-top: 20px;
            height: 30px;
            font-size: 14px;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            background-image: url('../../assets/images/tab2r.png');
            background-size: 100% 100%;
          }
        }
      }
    }
  }
  // 1
  .cttitle{
    font-size: 22px;
    color: white;
    font-weight: bold;
    width: 100%;
    text-align: center;
  }
  .cebbbox{
    padding-top: 30px;
    box-sizing: border-box;
    .cbselbox{
      display: flex;
      align-items: center;
      justify-content: space-between;
      .seltime{
        width: 155Px;
        height: 39Px;
        background-image: url('../../assets/images/cebbox.png');
        background-repeat: no-repeat;
        ::v-deep .el-input__inner{
          width: 155Px;
          height: 39Px;
          padding: 0px 0 0 36px;
          box-sizing: border-box;
        }
      }
      .allstu0{
        width: 153Px;
        height: 39Px;
        background-image: url('../../assets/images/cebbox2.png');
        background-repeat: no-repeat;
        ::v-deep .el-input__inner{
          padding-left: 45Px;
        }
      }
      .allstu{
        width: 301Px;
        height: 39Px;
        background-image: url('../../assets/images/cebbox3.png');
      }
    }
  }
</style>
